import React, {Component} from 'react'
import Block from 'fs-flex'
import {Badge, Grid, Modal, Toast} from 'antd-mobile';
import {routerRedux} from 'dva/router';
import {createForm} from 'rc-form';
import {connect} from 'dva'
import Header from '../../components/Header/index';
// import styles from './index.less';
import PaihaoService from '../../services/paihaoService';
import Canstant from '../../utils/constant'
import qs from 'qs'
import DateUtil from "../../utils/dateUtil";
import styles from "../manage/setting/holiday/index.less";

const operation = Modal.operation;

// 排号/选择日期节目
class DateForPH extends Component {
  state = {
    businessType: null,//业务类型ID
    businessTypeName: null,//业务类型ID
    dateList: null,//日期列表
    date: null,//选择的预约日期
  }

  async componentDidMount() {
    const {location} = this.props
    const {businessType} = qs.parse(location.search.split('?')[1])
    const {code, data} = await PaihaoService.get31DayQueueInfoForBusinessId(businessType)
    if (code === Canstant.responseOK) {
      this.setState({
        dateList: data,
        businessType: businessType || null
      })
      console.log("businessType: " + businessType)
      let business = await PaihaoService.queryBusinessTypeName(businessType)
      console.log("business.data.busitype: " + business.data.busitype)
      if (code === Canstant.responseOK) {
        this.setState({
          businessTypeName: business.data.busitype,
        })
      }
    }
  }


  //点击item触发
  itemClick(item) {
    const {available, date} = item
    const menuGroup = []
    if (available) {
      menuGroup.push({text: '预约排号', onPress: () => this.gotoPH(date)},)
    }
    operation(menuGroup)
  }

  //跳转链接
  gotoPH = (date) => {
    const {dispatch} = this.props
    let url = '/ph/phDate/phTime';
    if (!this.state.businessType) {
      Toast.fail('请选择业务类型', 1)
      return
    }
    url += `?businessType=${this.state.businessType}&date=` + date
    dispatch(routerRedux.push(url))
  }

  // 休息日样式——未选中
  restDay = {
    backgroundColor: 'rgb(245, 213, 213)',
  }

  // 休息日样式——未选中
  woekDay = {
    backgroundColor: 'rgb(187 255 255)',
    color: '#888', fontSize: '12px'
  }
  notWorkDay = {
    height:100,
    width: 100,
    backgroundColor: 'rgb(187 255 255)',
    fontSize: '12px',
  }


  renderItem = (dataItem) => {
    const {available, date, workDateVo} = dataItem
    const day = DateUtil.gitDayNumer(date)
    const month = DateUtil.gitMonthNumer(date) + 1
    if (!workDateVo.workDay) {
      return (
        <Block className={styles.dayItem} style={this.restDay} sy a='c' j='c' f={1} vf>
          <Block mt={15} fs={14} f={1}>{month}月 {day}日</Block>
          <Block mt={10} fs={16} h={20} a='c' j='c' style={{color: '#888', fontSize: '11px',}}>
            <span>非业务期</span>
          </Block>
        </Block>
      )
    } else {
      if (available) {
        return (
          <Block className={styles.dayItem} a='c' j='c' f={1} vf onClick={this.itemClick.bind(this, dataItem)}>
            <Block mt={15} fs={14} f={1}>{month}月 {day}日</Block>
            <Block mt={10} fs={16} h={20} a='c' j='c' style={{color: '#888', fontSize: '12px',}}>
              <span>可排号</span>
            </Block>
          </Block>
        )
      } else {
        return (
          <Badge className={styles.dayItem} text='已满' style={{marginTop: '3px', fontSize: '10px'}} hot corner>
            <Block className={styles.dayItem} style={this.restDay} a='c' j='c' f={1} vf>
              <Block mt={15} fs={14} f={1}>{month} 月 {day} 日</Block>
              <Block mt={10} fs={16} h={20} a='c' j='c' style={this.woekDay}>
                <span>已排满</span>
              </Block>
            </Block>
          </Badge>
        )
      }
    }

  }

  render() {
    const {dateList} = this.state
    return (
      <Block>
        <Block>
          <Header needBack={true} history={this.props.history} title='预约排号'/>
        </Block>
        <Block mt={10} fs={14} h={30} a='c' j='c' style={{color: '#888', fontSize: '12px',}}>
          <span>{this.state.businessTypeName}</span>
        </Block>
        <Block>
          <Grid
            columnNum={5}
            data={dateList}
            activeStyle={true}
            square={true}
            renderItem={(dataItem) => this.renderItem(dataItem)}
          />
        </Block>
      </Block>
    )
  }
}

export default connect()(createForm()(DateForPH))
